<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<script src="/qs/qs.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/elementui/index.js"></script>

<div id="app">
<!--    根据订单号和生产状态查询订单-->
    <span style="font-size: 14px">查询待生产订单：</span>
    <el-input v-model="input" placeholder="输入订单编号" style="width: 200px"></el-input>
    <span style="font-size: 14px">生产状态：</span>
    <el-radio v-model="radio" label="-1">已生产</el-radio>
    <el-radio v-model="radio" label="1">未生产</el-radio>
    <el-button type="primary" icon="el-icon-search" @click="selectByOrderIdAndState">查询</el-button>
<!--    接收数据-->
    <el-table
            :data="tableData"
            border
            :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column
                label="序号"
                align="center">
            <template slot-scope="scope">
                <span >{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单编号"
                align="center"
                sortable>
            <template slot-scope="scope">
                <span >{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品名称"
                align="center"
                sortable>
            <template slot-scope="scope">
                <span >{{ scope.row.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品型号"
                align="center"
                sortable>
            <template slot-scope="scope">
                <span >{{ scope.row.penterprise }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产数量"
                align="center"
                sortable>
            <template slot-scope="scope">
                <span >{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产产线"
                align="center"
                sortable>
            <template slot-scope="scope">
                <span >{{ scope.row.productionName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="使用打印机"
                align="center"
                sortable>
            <template slot-scope="scope">
                <span >{{ scope.row.printer }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产时间"
                align="center"
                sortable>
            <template slot-scope="scope">
                <span >{{ scope.row.productTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="生产状态">
            <template slot-scope="scope">
                <span v-if="scope.row.productStatus==1" style="color: red">未生产</span>
                <span v-else style="color: red">已生产</span>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="备注">
            <template slot-scope="scope">
                <span >{{ scope.row.remark }}</span>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="操作"
                sortable>
            <template slot-scope="scope">
                <span v-if="scope.row.productStatus==1" style="color: red">
                         <el-button
                                 type="primary"
                                 @click="toLaser(scope.$index, scope.row)">加入到激光码生成列表
                         </el-button>
                </span>
                <span v-else style="color: red">
                    <el-button type="primary" disabled>加入到激光码生成列表</el-button>
                </span>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change="currentChangeHandle"
            :current-page="current"
            :page-size="pageSize"
            :page-sizes="[10, 25, 50, 100]"
            @size-change="handleSizeChange"
            layout="prev, pager, next, sizes"
            :total="total">
    </el-pagination>

<!--    加入到激光码生成列表对话框-->
    <el-dialog title="设置生产记录" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="生产产线" :label-width="formLabelWidth">
                <el-select v-model="form.productLineId" placeholder="请选择生产产线">
                    <el-option  v-for="item in lines"
                                :key="item.id"
                                :label="item.productionName"
                                :value="item.id">
                    </el-option>
                </el-select>
                </el-select>
            </el-form-item>

            <el-form-item label="使用打印机" :label-width="formLabelWidth">
                <el-select v-model="form.printer" placeholder="请选择打印机">
                    <el-option v-for="item in printers"
                               :key = "item.id"
                               :label="item.pnum"
                               :value="item.pnum">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="生产时间" >
                        <el-date-picker
                                value-format="yyyy-MM-dd"
                                v-model="form.productTime"
                                type="date">
                        </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateProduct">确 定</el-button>
        </div>
    </el-dialog>


</div>

<script>

    new Vue({
        el:"#app",
        data() {
            return {
                tableData:null,//表格数据
                total: 0,//总条数
                current: 0,//当前页数
                pageSize: 10, //每页条数
                input:'', //输入框
                radio:'1',//单选按钮
                lines:null,//生产产线
                printers:null,//打印机
                dialogFormVisible: false,
                form: {
                    orderId:'',
                    id:'',
                    productLineId:'',
                    productTime:'',
                    printer:'',
                },
                formLabelWidth: '120px',
            }
        },
        methods:{
            loadPage(current,size) {
                this.current = current;
                // 查询订单
                axios.get("/pendingAll?current=" + current +"&size=" + size).then(value => {
                        if (value.data.state == 1) {
                            this.tableData = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    })
            },
            // 每页显示多少条
            handleSizeChange(val) {
                this.pageSize=val
                this.loadPage(this.current,this.pageSize)
            },
            // 当前页
            currentChangeHandle (val) {
                this.current=val
                this.loadPage(this.current,this.pageSize)
            },
            // 根据订单号和生产状态查询订单
            selectByOrderIdAndState(oderId, state){
                oderId = this.input;
                state = this.radio;
                if (oderId != null)
                axios.get("pendingByCondition?orderId="+oderId+"&state="+state).then(value => {
                    if (value.data.state == 1) {
                        this.tableData = value.data.data;
                    }
                })
            },

            // 跳转到激光码管理页面
            toLaser(index,row){
                this.form = row;
                this.dialogFormVisible=true;
            },

            // 修改生产产线 使用打印机 选择生产时间
            updateProduct(id,productLineId,productTime,printer,orderId){
                id = this.form.id;
                productLineId = this.form.productLineId;
                productTime = this.form.productTime;
                printer = this.form.printer;
                orderId = this.form.orderId;
                axios.put("/updateProduct?id="+id+"&productLineId="+productLineId+"&productTime="+productTime+
                    "&printer="+printer).then(value => {
                        if (value.data.state==1){
                            this.loadPage(1,this.pageSize);
                            this.dialogFormVisible=false;
                            location.href="/laser-code-management.html";
                        }
                })
                axios.post("/addLaser?orderId="+orderId).then(value => {
                })
            }
        },
        mounted() {
            this.loadPage(1,this.pageSize)
            axios.get("/line").then(value => {
                if (value.data.state == 1)
                    this.lines = value.data.data;
            })
            axios.get("printer").then(value => {
                if (value.data.state == 1)
                    this.printers = value.data.data;
            })
        }
    })

</script>
</body>
</html>